<template>
  <div class="login-container">
    <div class="title"></div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>登录</span>
        </div>
      </template>
      <el-form :model="loginForm" :rules="rules" ref="loginFormRef" label-width="0px">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button color="#B22222" @click="check">登录</el-button>
          <Vcode :show="isShow" @success="success(loginForm)" @close="close" @fail="fail"></Vcode>
          <el-button color="#B22222" @click="$router.push('/register')">注册</el-button>
          <el-button color="#B22222" @click="resetForm('loginFormRef')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {useRouter} from 'vue-router';
import {ElMessage} from 'element-plus';
// 拼图验证插件
import Vcode from 'vue3-puzzle-vcode'
import axios from "axios"
import { ms } from 'element-plus/es/locales.mjs';

const router = useRouter();

const isShow = ref(false)

const loginForm = ref({
  username: '',
  password: '',
});

const rules = ref({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ],
});

const check = () => {
  isShow.value = true
};

const resetForm = (formName) => {
  loginFormRef.value.resetFields();
};

const loginFormRef = ref(null);

// 验证拼图成功
const success = (loginForm) => {
  isShow.value = false
  // const params = {
  //   username: loginForm.username,
  //   password: loginForm.password,
  // };
  // const result = axios.post("api/user/login", {params})
  // console.log(result.data);

  // if (result.data.code) {
  //   localStorage.setItem('ID', result.data.data.id);
  //   localStorage.setItem('token', result.data.data.token);
  //   ElMessage.success('登录成功');
  //   router.push('/dashboard/index');
  // } else {
  //   ElMessage.error('登录失败');
  //   return false;
  // }

  if (loginForm.username && loginForm.password) {
    // 模拟登录成功
    ElMessage.success('登录成功');
    localStorage.setItem('userName', loginForm.username)
    router.push('/dashboard/index');
  } else {
    ElMessage.error('登录失败');
    return false;
  }

}

const close = () => {
  isShow.value = false
}

const fail = () => {
  console.log('验证失败')
}

</script>

<style scoped>
.login-container {
  position: relative;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url(../assets/img/loginLogo1.jpg);
  background-size: 100% 100%;
  background-attachment: fixed;
}

.box-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 80%;
  top: 0%;
  transform: translate(-50%, 0);
  border: none;
  width: 350px;
  height: 100%;
  background-color: #ffffffB3;
}

.box-card:hover {
  opacity: 0.85;
  color: #fff;
  background-color: #B22222;
}

.card-header {
  font-size: 25px;
}

.title {
  position: absolute;
  top: 40%;
  left: 35%;
  width: 880px;
  height: 110px;
  transform: translate(-50%, 0);
  background-image: url(../assets/img/title3.png);
}
</style>
